<script setup>
import {onBeforeMount, ref, watch,defineProps,defineEmits} from "vue";
import MenuItem from "@/components/menu/MenuItem.vue";
import {useNowRouterStore} from "@/stores/nowRouterStore.js";
import {useMenuTreeStore} from "@/stores/menuTreeStore.js";

const menuTreeStore = useMenuTreeStore()
const nowRouterStore = useNowRouterStore()
const collapse = ref(false)
const emits = defineEmits(['onSelect'])
const props = defineProps({
  collapse:{
    type:Boolean,
    default: false
  }
})
onBeforeMount(async () => {
})


function queryMenu(){

}

function onSelect(index, indexPath, item, routerResult){
  console.log(index,indexPath,item,routerResult)
  // nowRouter.name = index
  nowRouterStore.setName(index)
  emits("onSelect",index,indexPath,item,routerResult)
}

watch(() => props.collapse,() => {
  collapse.value = props.collapse
})


</script>

<template>
  <div style="height: 100vh;display: flex;justify-content: center;align-items: center;padding: 1vh">
    <div style="height: 98vh;flex: 100%;box-shadow: 0 0 6px gainsboro;border-radius:8px;">
      <div class="_menuTitle">MENU</div>
      <el-menu
          :default-active="nowRouterStore.name"
          :unique-opened="true"
          :router="true"
          class="el-menu-vertical-demo"
          @select="onSelect">
        <menu-item v-for="item in menuTreeStore.menuTree" :menu="item" />
      </el-menu>
    </div>

  </div>
</template>

<style scoped>
:deep(.el-menu){
  border: 0;
  background-color: transparent;
}
._menuTitle{
  width: 100%;
  height: 5vh;
  background-color: var(--blue);
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  font-weight: bolder;
  color: white;
}
</style>
